<template>
    <div class="pc mBg relative">
        <div class="mt-[46px] mx-[12px] pcbox  pb-[30px]">
            <div class="p-[20px]">
                <p class="font-bold color1 text-[17px]">请输入基本信息</p>

            </div>
            <div class="mt-[1px] ">
                <van-form @submit="onSubmit">
                    <van-field v-model="ruleForm.phone" name="联系手机号" label="联系手机号" placeholder="联系手机号" :rules="[{ required: true, message: '请填写联系手机号', },
                    {
                        pattern: /^1[3456789]\d{9}$/,
                        message: '手机号码格式错误！',
                        trigger: 'onBlur',
                    },]" />

                    <van-field v-model="ruleForm.name" name="姓名" label="姓名" placeholder="姓名"
                        :rules="[{ required: true, message: '请填写姓名' }]" />

                    <van-field v-model="ruleForm.idcard" name="身份证" label="身份证" placeholder="身份证" :rules="[
                        { required: true, message: '请填写身份证' },
                        {
                            pattern:
                                /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/,
                            message: '身份证号格式不正确'
                        }
                    ]" />

                    <van-field v-model="ruleForm.school" name="就读学校" label="就读学校" placeholder="就读学校"
                        :rules="[{ required: true, message: '请填写就读学校' }]" />

                    <van-field v-model="ruleForm.sex" @click="sexpicker = true" is-link readonly name="picker" label="性别"
                        placeholder="选择性别" :rules="[{ required: true, message: '请填写性别' }]" />


                    <van-field v-model="ruleForm.date" @click="datepicker = true" is-link readonly name="picker"
                        label="出生日期" placeholder="出生日期" :rules="[{ required: true, message: '请填写出生日期' }]" />

                    <div class=" text-center px-[38px] mt-[50px]">
                        <van-button type="primary" native-type="submit" round block>开始测评</van-button>
                    </div>
                </van-form>
            </div>

        </div>
        <div class="px-[60px] w-[100%] absolute bottom-[100px] text-center text-[13px] font-medium">
            <p class="color1">指导语：请在相应位置填写您孩子的信息，并根据您孩子过去 6 个月的行为 勾选符合情况的相应选项。请务必回答每一道！</p>
        </div>

        <!-- 性别弹窗开始 -->
        <van-popup v-model:show="sexpicker" position="bottom">
            <van-picker :columns="columns" @confirm="onConfirm" @cancel="sexpicker = false" />
        </van-popup>
        <!-- 性别弹窗结束 -->
        <!-- 日期弹窗开始 -->
        <van-popup v-model:show="datepicker" position="bottom">
            <van-date-picker @confirm="datepicker = false" @cancel="datepicker = false" :min-date="minDate" :max-date="maxDate"
                v-model="currentDate" title="选择日期" />
        </van-popup>
        <!-- 日期弹窗结束 -->

    </div>
</template>

<script setup lang="ts">
import { showFailToast } from 'vant';
import api from "@/api/api"
import { useAutoRequest } from "@/hooks/loading"
const [loading, BasicAssessmentSearch] = useAutoRequest(api.BasicAssessmentSearch)
const ruleForm = ref<any>({
})
const currentDate = ref([]);
const minDate = new Date(1990, 0, 1)
const maxDate = new Date()
const sexpicker = ref(false)
const datepicker = ref(false)
const router = useRouter()
const columns = [
    { text: '男', value: '男' },
    { text: '女', value: '女' },
];
const onSubmit = (values) => {
    console.log('submit', values);
    goPC()
};
const goPC = async () => {
    const data = await BasicAssessmentSearch({
        name: ruleForm.value.name,
        id_card: ruleForm.value.idcard
    })
    if (!data) {
        router.push({
            path: '/start',
            query: {
                school: ruleForm.value.school,
                name: ruleForm.value.name,
                sex: ruleForm.value.sex,
                gender: ruleForm.value.sex,
                age: getBirthSlot(ruleForm.value.date),
                birth: ruleForm.value.date,
                mobile: ruleForm.value.phone,
                id_card: ruleForm.value.idcard
            }
        })
    }else {
        router.push({
            path: '/result',
            query: {
                school: ruleForm.value.school,
                name: ruleForm.value.name,
                sex: ruleForm.value.sex,
                gender: ruleForm.value.sex,
                age: getBirthSlot(ruleForm.value.date),
                birth: ruleForm.value.date,
                mobile: ruleForm.value.phone,
                id_card: ruleForm.value.idcard,
                id: data.id,
                choseList: JSON.stringify(data.answer_record)
            }
        })
    }

}
const onConfirm = (e) => {
    ruleForm.value.sex = e.selectedValues[0]
    sexpicker.value = false
}

const getBirthSlot = (date) => {
    let birthDay: any = new Date(date)
    let nowDate: any = new Date()
    let date1 = Date.parse(birthDay)
    let date2 = Date.parse(nowDate)
    let day = Math.ceil((date2 - date1) / (60 * 60 * 1000 * 24))
    let age = ''
    let year = Math.floor(day / 365)
    let y = day % 365
    let month = Math.floor(y / 30)
    let d = Math.floor(day % 365 % 30)
    age += year + '岁' + month + '月' + d + '天'
    return age
}
watchEffect(() => {
    const date = currentDate.value
    const day = date.join('-')
    ruleForm.value.date = day
})
</script>

<style  scoped lang="scss">
.pc {
    .pcbox {
        border-radius: 14px;
        background: #FFFFFF;
    }
}
</style>